<template>
  <view class="wrong-questions">
    <h1>我的错题</h1>
	<view style="display: flex;justify-content: center;flex-direction: row">
	<view style="box-shadow: 0 0 20px #90A674; border: 50rpx solid whitesmoke;border-radius: 100%;width: 300rpx;height: 300rpx;margin-bottom: 50rpx;">
		<view style="box-shadow: 0 0 10px #90A674; margin-top: 15%;margin-left: 15%;border: 5rpx solid #F0EEEF;border-radius: 100%;width: 200rpx;height: 200rpx;">
			<text style="font-size: 60rpx;color:#90A674;display: flex;margin-top: 30%;margin-left: 40%;width: 60rpx;">{{wrongNum}} 
			<text style="font-size: 30rpx;display: flex;width: 140rpx;margin-left: -30%;line-height: 40rpx;">我的错题</text>
			</text>
		</view>
	</view>
    </view>
	
	<ul v-for="question in wrong" :key="question.id" class="question-item">
		
      
        <h3 class="question-title">{{ question.wrongType }}</h3>
        <li><p class="question-description">{{ question.wrongContent }}</p></li>
        <p class="question-answer">答案：{{ question.answer }}</p>
      
	 
    </ul>
	
  </view>
</template>

<script>
export default {
	data() {
	  return {
	    wrong: [],
		  wrongNum:0
	  };
	},
	mounted() {
		uni.request({
			url:"http://localhost:8888/getwrongnum",
			method:"GET",
			success: (res) => {
			  // 请求成功的处理逻辑
			  // console.log(res.data.data[0].count);
			  
			  var data = res.data.data[0].count;
			  this.wrongNum=data;
			   // 将数据库内容赋值给变量
			  // console.log(data)
			  // console.log(this.wrongNum)
			},
			fail: (err) => {
			  // 请求失败的处理逻辑
			  console.error(err);
			},
			
		});
		uni.request({
			url:"http://localhost:8888/getwrong",
			method:"GET",
			success: (res) => {
			  // 请求成功的处理逻辑
			  // console.log(res);
			  
			  var data = res.data.data;
			  this.wrong=data;
			   // 将数据库内容赋值给变量
			  // console.log(data)
			  // console.log(this.wrong)
			},
			fail: (err) => {
			  // 请求失败的处理逻辑
			  console.error(err);
			},
			
		});
	}

};
</script>

<style>
.wrong-questions {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  
}

h1 {
	color: #90A674;
	font-family: 隶书;
	font-size: 80rpx;
	text-align: center;
	margin-bottom: 20px;
}

.question-item {
	background-color: #f5f5f5;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 5px;
	box-shadow: 0 0 8px #90A674;
}

.question-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}

.question-description {
  font-size: 14px;
  margin-bottom: 10px;
}

.question-answer {
  font-size: 14px;
  font-style: italic;
  color: #888;
}
</style>
